<template>
	<view>
		<view class="top">
			<view class="">
				<navigator url="/pages/yonghu1/zhuanyexiche/zhuanyexiche">
					<image class="back" src="/static/images/白色左箭头.png" mode=""></image>
				</navigator>
				<view class="title">
					洗车店详情
				</view>
			</view>
		</view>
		<view class="body">
			<uni-card class="card" :is-shadow="false">
				<view class="text">
					<view class="merchant-image">
						<image :src="merchantImage" mode="aspectFill"></image>
					</view>
					<view class="title">
						{{merchant.name}}
					</view>
					<view class="wz">
						<view class="rating">
							<uni-rate :value="merchant.rate" size="16" readonly />
							<text class="rating-text">{{merchant.rate}}分</text>
						</view>
						<view class="business-hours">
							营业时间：{{formatBusinessHours(merchant.startTime, merchant.endTime)}}
						</view>
						<view class="address">
							位置：{{merchant.address}}
						</view>
						<view class="area">
							营业区域：{{merchant.operatingArea}}
						</view>
					</view>
				</view>
			</uni-card>

			<uni-card class="description" :is-shadow="false">
				<view class="title">
					店铺介绍
				</view>
				<view class="content">
					{{merchant.description || '暂无店铺介绍'}}
				</view>
			</uni-card>

			<!-- 评价列表 -->
			<uni-card class="evaluation" :is-shadow="false">
				<view class="title">
					用户评价
				</view>
				<view v-if="evaluateList.length > 0">
					<view v-for="(item, index) in evaluateList" :key="index" class="evaluation-item">
						<view class="evaluation-header">
							<view class="user-info">
								<text class="username">{{item.userName || '匿名用户'}}</text>
								<uni-rate :value="item.score" size="14" readonly />
							</view>
							<text class="time">{{formatDate(item.createTime)}}</text>
						</view>
						<view class="evaluation-content">
							{{item.content}}
						</view>
					</view>
				</view>
				<view v-else class="empty-evaluation">
					暂无评价
				</view>
			</uni-card>
			
			<view class="dibu">
				<view class="left">
					<image style="width: 15px; height: 15px; margin-top: 16px;" src="/static/images/客服@2x.png" mode=""></image>
					<view class="kefu" @click="show=true">
						联系客服
					</view>
					<u-popup :show="show" @close="close" @open="open" round="15" mode="bottom">
						<view class="relaDoor">
							<view class="doorItem">18642589456</view>
							<view class="doorItem">复制</view>
							<view class="doorItem" @click="show=false">取消拨号</view>
						</view>
					</u-popup>
				</view>
				<navigator :url="'/pages/yonghu1/order/order?merchantId=' + merchant.id" class="xiadan">
					立即下单
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../../uitls/request';

export default {
	data() {
		return {
			merchantId: null,
			merchant: {
				name: '',
				rate: 0,
				address: '',
				operatingArea: '',
				description: '',
				startTime: '',
				endTime: ''
			},
			merchantImage: '/static/images/default-merchant.png', // 默认图片
			show: false,
			evaluateList: [] // 添加评价列表数据
		}
	},
	onLoad(options) {
		if (options.merchantId) {
			this.merchantId = options.merchantId;
			// 如果URL中有图片参数，则使用URL中的图片
			if (options.merchantImage) {
				this.merchantImage = decodeURIComponent(options.merchantImage);
			}
			this.getMerchantDetails(this.merchantId);
			// 获取该商家的评价列表
			this.getMerchantEvaluations(this.merchantId);
		} else {
			uni.showToast({
				title: '未接收到商家信息',
				icon: 'none'
			});
		}
	},
	methods: {
		getMerchantDetails(merchantId) {
			request({
				url: `/xsc/merchant/${merchantId}`,
				method: 'GET',
				success: (res) => {
					console.log('接收到的商家数据:', res.data);
					if (res.data.code === 200 && res.data.data) {
						// 处理返回的数据
						const merchantData = Array.isArray(res.data.data) ? res.data.data[0] : res.data.data;
						console.log('处理后的商家数据:', merchantData);
						
						// 如果API返回的图片URL不为空，则使用API返回的图片
						if (merchantData.merchantImage) {
							this.merchantImage = merchantData.merchantImage;
							console.log('使用API返回的商家图片:', this.merchantImage);
						}
						
						this.merchant = {
							name: merchantData.name || '',
							rate: merchantData.rate || 0,
							address: merchantData.address || '',
							operatingArea: merchantData.operatingArea || '',
							description: merchantData.description || '',
							startTime: merchantData.startTime || '',
							endTime: merchantData.endTime || '',
							id: merchantData.id
						};
						
						console.log('设置后的商家信息:', this.merchant);
						console.log('xichedian.vue -> 商家ID:', this.merchant.id);
						console.log('最终使用的商家图片:', this.merchantImage);
					} else {
						uni.showToast({
							title: res.data.msg || '获取商家详情失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('请求失败:', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		},
		formatBusinessHours(startTime, endTime) {
			if (!startTime || !endTime) return '未知营业时间';
			return `${startTime} 至 ${endTime}`;
		},
		formatDate(dateStr) {
			if (!dateStr) return '';
			const date = new Date(dateStr);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},
		open() {
			// console.log('open');
		},
		close() {
			this.show = false;
		},
		// 获取商家评价列表
		getMerchantEvaluations(merchantId) {
			request({
				url: '/xsc/type/evaluate/list',
				method: 'GET',
				success: (res) => {
					if (res.data.code === 200) {
						console.log('评价列表数据:', res.data.data);
						// 将merchantId转换为字符串进行比较
						const currentMerchantId = String(merchantId);
						console.log('当前商家ID:', currentMerchantId);
						
						// 筛选当前商家的评价
						this.evaluateList = (res.data.data || []).filter(item => {
							console.log('比较:', {
								itemMerchantId: item.merchant_id,
								currentMerchantId: currentMerchantId,
								isMatch: String(item.merchant_id) === currentMerchantId
							});
							return String(item.merchant_id) === currentMerchantId;
						});
						
						console.log('筛选后的评价列表:', this.evaluateList);
						
						// 如果没有评价，显示提示
						if (this.evaluateList.length === 0) {
							uni.showToast({
								title: '暂无评价',
								icon: 'none'
							});
						}
					} else {
						console.error('获取评价列表失败:', res.data.msg);
						uni.showToast({
							title: '获取评价列表失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('请求评价列表失败:', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style scoped>
	.doorItem {
		width: 700rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.dibu {
		margin-top: 50px;
		background-color: white;
		display: flex;
		height: 50px;
		justify-content: space-around;
	}
	
	.dibu .left {
		display: flex;
	}
	
	.dibu .kefu {
		margin-left: 5px;
		margin-top: 10px;
		height: 30px;
		line-height: 30px;
		font-weight: bold;
		font-size: 12px;
	}
	
	.dibu .xiadan {
		margin-top: 10px;
		height: 30px;
		width: 100px;
		line-height: 30px;
		background-color: #0662E6;
		color: white;
		font-size: 13px;
		text-align: center;
		border-radius: 20px;
	}
	
	.top {
		width: 100%;
		padding-bottom: 120px;
		background: url(../../../static/images/组\ 8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	.top .back {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}
	
	.top .title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		padding-top: 20px;
	}
	
	.body {
		margin-top: -120px;
	}
	
	.card {
		border-radius: 10px;
	}
	
	.text {
		margin-top: 20px;
	}
	
	.text .title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
	}
	
	.wz {
		font-size: 14px;
		color: #666;
	}
	
	.wz .rating {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.wz .rating-text {
		margin-left: 10px;
		color: #FF6E45;
	}
	
	.wz .business-hours,
	.wz .address,
	.wz .area {
		margin-bottom: 8px;
	}
	
	.description {
		border-radius: 10px;
		margin-top: 20px;
	}
	
	.description .title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	
	.description .content {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}
	
	.merchant-image {
		width: 100%;
		height: 300rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.merchant-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.evaluation {
		border-radius: 10px;
		margin-top: 20px;
	}
	
	.evaluation .title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}
	
	.evaluation-item {
		padding: 15px 0;
		border-bottom: 1px solid #eee;
	}
	
	.evaluation-item:last-child {
		border-bottom: none;
	}
	
	.evaluation-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.user-info {
		display: flex;
		align-items: center;
	}
	
	.username {
		font-size: 14px;
		color: #333;
		margin-right: 10px;
	}
	
	.time {
		font-size: 12px;
		color: #999;
	}
	
	.evaluation-content {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}
	
	.empty-evaluation {
		text-align: center;
		padding: 30px 0;
		color: #999;
		font-size: 14px;
	}
</style>